<template>
  <div class="icon-container">
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-upload"></i>
          <br>
          <el-tooltip content="<i class='el-icon-upload'></i>" placement="top">
            <span>el-icon-upload</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-error"></i>
          <br>
          <el-tooltip content="<i class='el-icon-error'></i>" placement="top">
            <span>el-icon-error</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-error"></i>
          <br>
          <el-tooltip content="<i class='el-icon-success'></i>" placement="top">
            <span>el-icon-success</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-warning"></i>
          <br>
          <el-tooltip content=" <i class='el-icon-warning'></i>" placement="top">
            <span>el-icon-warning</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-sort-down"></i>
          <br>
          <el-tooltip content=" <i class='el-icon-sort-down'>" placement="top">
            <span>el-icon-sort-down</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-sort-up"></i>
          <br>
          <el-tooltip content="<i class='el-icon-sort-up'></i>" placement="top">
            <span>el-icon-sort-up</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-arrow-left"></i>
          <br>
          <el-tooltip content="<i class='el-icon-arrow-left'></i>" placement="top">
            <span>el-icon-arrow-left</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-plus"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-plus'></i>" placement="top">
            <span>el-icon-circle-plus</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-plus-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-plus-outline'></i>" placement="top">
            <span>el-icon-circle-plus-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-arrow-down"></i>
          <br>
          <el-tooltip content="<i class='el-icon-arrow-down'></i>" placement="top">
            <span>el-icon-arrow-down</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-arrow-right"></i>
          <br>
          <el-tooltip content="<i class='el-icon-arrow-right'></i>" placement="top">
            <span>el-icon-arrow-right</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-arrow-up"></i>
          <br>
          <el-tooltip content="<i class='el-icon-arrow-up'></i>" placement="top">
            <span>el-icon-arrow-up</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-back"></i>
          <br>
          <el-tooltip content="<i class='el-icon-back'></i>" placement="top">
            <span>el-icon-back</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-close"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-close'></i>" placement="top">
            <span>el-icon-circle-close</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-date"></i>
          <br>
          <el-tooltip content="<i class='el-icon-date'></i>" placement="top">
            <span>el-icon-date</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-close-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-close-outline'></i>" placement="top">
            <span>el-icon-circle-close-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-caret-left"></i>
          <br>
          <el-tooltip content="<i class='el-icon-caret-left'></i>" placement="top">
            <span>el-icon-caret-left</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-caret-bottom"></i>
          <br>
          <el-tooltip content="<i class='el-icon-caret-bottom'></i>" placement="top">
            <span>el-icon-caret-bottom</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-caret-top"></i>
          <br>
          <el-tooltip content="<i class='el-icon-caret-top'></i>" placement="top">
            <span>el-icon-caret-top</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-caret-right"></i>
          <br>
          <el-tooltip content="<i class='el-icon-caret-right'></i>" placement="top">
            <span>el-icon-caret-right</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-close"></i>
          <br>
          <el-tooltip content="<i class='el-icon-close'></i>" placement="top">
            <span>el-icon-close</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-d-arrow-left"></i>
          <br>
          <el-tooltip content="<i class='el-icon-d-arrow-left'></i>" placement="top">
            <span>el-icon-d-arrow-left</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-check"></i>
          <br>
          <el-tooltip content="<i class='el-icon-check'></i>" placement="top">
            <span>el-icon-check</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-delete"></i>
          <br>
          <el-tooltip content="<i class='el-icon-delete'></i>" placement="top">
            <span>el-icon-delete</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-d-arrow-right"></i>
          <br>
          <el-tooltip content="<i class='el-icon-d-arrow-right'></i>" placement="top">
            <span>el-icon-d-arrow-right</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-document"></i>
          <br>
          <el-tooltip content="<i class='el-icon-document'></i>" placement="top">
            <span>el-icon-document</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-d-caret"></i>
          <br>
          <el-tooltip content="<i class='el-icon-d-caret'></i>" placement="top">
            <span>el-icon-d-caret</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-edit-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-edit-outline'></i>" placement="top">
            <span>el-icon-edit-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-download"></i>
          <br>
          <el-tooltip content="<i class='el-icon-download'></i>" placement="top">
            <span>el-icon-download</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-goods"></i>
          <br>
          <el-tooltip content="<i class='el-icon-goods'></i>" placement="top">
            <span>el-icon-goods</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-search"></i>
          <br>
          <el-tooltip content="<i class='el-icon-search'></i>" placement="top">
            <span>el-icon-search</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-info"></i>
          <br>
          <el-tooltip content="<i class='el-icon-info'></i>" placement="top">
            <span>el-icon-info</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-message"></i>
          <br>
          <el-tooltip content="<i class='el-icon-message'></i>" placement="top">
            <span>el-icon-message</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-edit"></i>
          <br>
          <el-tooltip content="<i class='el-icon-edit'></i>" placement="top">
            <span>el-icon-edit</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-location"></i>
          <br>
          <el-tooltip content="<i class='el-icon-location'></i>" placement="top">
            <span>el-icon-location</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-loading"></i>
          <br>
          <el-tooltip content="<i class='el-icon-loading'></i>" placement="top">
            <span>el-icon-loading</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-location-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-location-outline'></i>" placement="top">
            <span>el-icon-location-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-menu"></i>
          <br>
          <el-tooltip content="<i class='el-icon-menu'></i>" placement="top">
            <span>el-icon-menu</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-minus"></i>
          <br>
          <el-tooltip content="<i class='el-icon-minus'></i>" placement="top">
            <span>el-icon-minus</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-bell"></i>
          <br>
          <el-tooltip content="<i class='el-icon-bell'></i>" placement="top">
            <span>el-icon-bell</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-mobile-phone"></i>
          <br>
          <el-tooltip content="<i class='el-icon-mobile-phone'></i>" placement="top">
            <span>el-icon-mobile-phone</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-news"></i>
          <br>
          <el-tooltip content="<i class='el-icon-news'></i>" placement="top">
            <span>el-icon-news</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-more"></i>
          <br>
          <el-tooltip content="<i class='el-icon-more'></i>" placement="top">
            <span>el-icon-more</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-more-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-more-outline'></i>" placement="top">
            <span>el-icon-more-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-phone"></i>
          <br>
          <el-tooltip content="<i class='el-icon-phone'></i>" placement="top">
            <span>el-icon-phone</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-phone-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-phone-outline'></i>" placement="top">
            <span>el-icon-phone-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-picture"></i>
          <br>
          <el-tooltip content="<i class='el-icon-picture'></i>" placement="top">
            <span>el-icon-picture</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-picture-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-picture-outline'></i>" placement="top">
            <span>el-icon-picture-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-plus"></i>
          <br>
          <el-tooltip content="<i class='el-icon-plus'></i>" placement="top">
            <span>el-icon-plus</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-printer"></i>
          <br>
          <el-tooltip content="<i class='el-icon-printer'></i>" placement="top">
            <span>el-icon-printer</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-rank"></i>
          <br>
          <el-tooltip content="<i class='el-icon-rank'></i>" placement="top">
            <span>el-icon-rank</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-refresh"></i>
          <br>
          <el-tooltip content="<i class='el-icon-refresh'></i>" placement="top">
            <span>el-icon-refresh</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-question"></i>
          <br>
          <el-tooltip content="<i class='el-icon-question'></i>" placement="top">
            <span>el-icon-question</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-remove"></i>
          <br>
          <el-tooltip content="<i class='el-icon-remove'></i>" placement="top">
            <span>el-icon-remove</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-share"></i>
          <br>
          <el-tooltip content="<i class='el-icon-share'></i>" placement="top">
            <span>el-icon-share</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-star-on"></i>
          <br>
          <el-tooltip content="<i class='el-icon-star-on'></i>" placement="top">
            <span>el-icon-star-on</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-setting"></i>
          <br>
          <el-tooltip content="<i class='el-icon-setting'></i>" placement="top">
            <span>el-icon-setting</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-check"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-check'></i>" placement="top">
            <span>el-icon-circle-check</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-service"></i>
          <br>
          <el-tooltip content="<i class='el-icon-service'></i>" placement="top">
            <span>el-icon-service</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-sold-out"></i>
          <br>
          <el-tooltip content="<i class='el-icon-sold-out'></i>" placement="top">
            <span>el-icon-sold-out</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-remove-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-remove-outline'></i>" placement="top">
            <span>el-icon-remove-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-star-off"></i>
          <br>
          <el-tooltip content="<i class='el-icon-star-off'></i>" placement="top">
            <span>el-icon-star-off</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-circle-check-outline"></i>
          <br>
          <el-tooltip content="<i class='el-icon-circle-check-outline'></i>" placement="top">
            <span>el-icon-circle-check-outline</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-tickets"></i>
          <br>
          <el-tooltip content="<i class='el-icon-tickets'></i>" placement="top">
            <span>el-icon-tickets</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-sort"></i>
          <br>
          <el-tooltip content="<i class='el-icon-sort'></i>" placement="top">
            <span>el-icon-sort</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-zoom-in"></i>
          <br>
          <el-tooltip content="<i class='el-icon-zoom-in'></i>" placement="top">
            <span>el-icon-zoom-in</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-time"></i>
          <br>
          <el-tooltip content="<i class='el-icon-time'></i>" placement="top">
            <span>el-icon-time</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-view"></i>
          <br>
          <el-tooltip content="<i class='el-icon-view'></i>" placement="top">
            <span>el-icon-view</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-upload2"></i>
          <br>
          <el-tooltip content="<i class='el-icon-upload2'></i>" placement="top">
            <span>el-icon-upload2</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <i class="el-icon-zoom-out"></i>
          <br>
          <el-tooltip content="<i class='el-icon-zoom-out'></i>" placement="top">
            <span>el-icon-zoom-out</span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.icon-container {
  padding: 40px;
  background: $base-white;
  .el-col {
    border: 1px solid #999;
    border-top: 0;
    border-right: 0;
    height: 88px;
    &:nth-child(6n) {
      border-right: 1px solid #999;
    }
    &:nth-child(-n + 6) {
      border-top: 1px solid #999;
    }
    &:nth-last-child(1) {
      border-right: 1px solid #999;
    }
  }
  .grid-content {
    font-size: 12px;
    // line-height: 30px;
    padding: 15px 0;
    cursor: pointer;
    i {
      font-size: 30px;
      display: block;
    }
    span {
      display: inline-block;
    }
  }
}
</style>

